<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Kinome Overlay</title>

    <!-- linked styles -->
    <link href="css/custom-theme/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/kinome.css" rel="stylesheet" type="text/css" />
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="laktek/colorPicker.css" rel="stylesheet" />
    <link rel="icon" type="image/ico" href="kinome-overlay.ico" />

    <!-- Necessary JS Libraries -->
    <script src="js/jquery-1.7.2.js"></script>
    <script src="js/jquery-ui-1.8.22.custom.min.js"></script>
    <script src="js/d3.v2.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="laktek/jquery.colorPicker.js"></script>

    </head>

<body>

<!-- Navbar (tbs) -->
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container" style="width: 1065px">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#" style="margin-left: -20px">Kinome Overlay</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="http://code.google.com/p/kinome-overlay">About</a></li>
                    <li><a href="mailto:josephl@cs.pdx.edu,nrobin24@uw.edu">Contact</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>
<!-- end navbar -->

<div class="container" id="control">
    <div class="row">

        <!-- Sidebar -->
        <div class="span3">
            <ul class="nav nav-list">

                <!-- Upload Tab -->
                <li class="nav-header">Upload Data</li>
                    <div id="upload">
                        <input id="csv_file" type="file" accept="text/csv" multiple></input>
                    </div><!-- end upload -->

                <!-- Scaling -->
                <li class="nav-header">Scaling</li>
                    <div id="scaling">
                        <table class="slideRow">
                            <tr>
                                <td class="nameCell">Coefficient</td>
                                <td class="slideCell"><div class="slider" id="slope"></div></td>
                                <td class="labelCell"><label id="slope"></label></td>
                            </tr>
                        </table>
                    </div><!-- end scaling -->

                <!-- Threshold -->
                <li class="nav-header">Threshold</li>
                    <div id="scaling">
                        <table class="slideRow">
                            <tr>
                                <td class="nameCell">Inhibitor</td>
                                <td class="slideCell"><div class="slider" id="threshInh"></div></td>
                                <td class="labelCell"><label id="threshInh"></label></td>
                            </tr>
                            <tr>
                                <td class="nameCell">Activator</td>
                                <td class="slideCell"><div class="slider" id="threshAct"></div></td>
                                <td class="labelCell"><label id="threshAct"></label></td>
                            </tr>
                        </table>
                    </div><!-- end scaling -->


                <!-- Color Picker -->
                <li class="nav-header">Color</li>
                    <div id="colors">
                    <!-- opacity -->
                        <table class="slideRow">
                            <tr>
                                <td class="nameCell">Opacity</td>
                                <td class="slideCell">
                                    <div id="opac"></div>
                                </td>
                                <td class="labelCell">
                                    <label id="opac"></label>
                                </td>
                            </tr>
                        </table>

                        <table id="colorPickerTable" style="display: none">
                            <tr>
                                <td>
                                    <label for="inh">Inhibitor</label>
                                </td>
                                <td>
                                    <input id="inh" name="inh" type="text" value="#39275b">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="act">Activator</label>
                                </td>
                                <td>
                                    <input id="act" name="act" type="text" value="#c79900">
                                </td>
                            </tr>
                        </table>

                                            </div><!-- end colors tab -->

                <!-- Label toggle -->
                <li class="nav-header">Labels</li>
                    <div>
                        <button id="labelToggle" type="button" class="btn active" data-toggle="button">Show Labels</button>
                    </div>

                <!-- Demo w/out p-value -->
                <li class="nav-header">siRNA Demo</li>
                    <div>
                        <button id="fc" class="demo">Fold Change Only</button>
                    </div>
                <!-- Demo w/p-value -->
                    <div>
                        <button id="fc_pVal" class="demo">Fold Change + P-Value</button>
                    </div>
                <!-- end demo -->

                <!-- Export Button -->
                <li class="nav-header">Export</li>
                    <div>
                        <button id="export">Export to PNG</button>
                    </div>

            </ul>

        </div><!-- end span -->

        <!-- Kinome -->
        <div class="span9">
            <div id="kinomeDiv">
                <svg id="kinome">
                    <defs>
                        <linearGradient id="inhGrad" x1="100%" y1="0%" x2="0%" y2="0%">
                            <stop offset="0%" stop-color="#ffff00" stop-opacity="1"/>
                            <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/>
                        </linearGradient>
                        <linearGradient id="actGrad" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" stop-color="#ffff00" stop-opacity="1"/>
                            <stop offset="100%" stop-color="#00ff00" stop-opacity="1"/>
                        </linearGradient>
                    </defs>
                    <image xlink:href="img/kinome.svg" width="825px" height="975px"></image>
                    <g id="kinase_grp"></g>
                    <g class="data" id="grp"></g>
                    <g id="key" transform="translate(40, 875)" width="250" height="60">
                    </g>
                </svg>
            </div>
        </div><!-- end span/Kinome -->

    </div><!-- end row -->

    <!-- Export image modal -->
    <div class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Kinome PNG</h3>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <span>
                To save image: Right-click, "Save image as..."
            </span>
            <a href="#" class="btn" data-dismiss="modal">Close</a>
        </div>
    </div>

    <div id="footer" class="row">
        <div class="span9">
            Copyright 2012 &copy; Joseph Lee, Nick Robin
        </div>
    </div>
</div>

    <!-- main application script -->
    <script src="js/kinome-overlay.js"></script>

</body>

</html>
